<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<!-- 用户信息 -->
			<view class="header_user">
				<view class="user_information">
					<image class="user" :src="User.getStatus()?userStore.userInfo.headerurl:user.profile" mode="">
					</image>
					<view class="content">
						<view class="title" v-if="User.getStatus()">
							{{userStore.userInfo.nickname}}
						</view>
						<view class="title" v-else @click="toLogin">
							请先登录
						</view>
						<view class="phone" v-if="User.tel()">
							{{userStore.userInfo.tel}}
						</view>
					</view>
				</view>
				<!-- 二维码  判断是否登录 没登陆不显示 -->
				<view class="qr_code" v-if="User.getStatus()" @click='userInformation'>
					<image class="code" src="/static/code.jpg" mode=""></image>
					<uni-icons type="right" size="26" color="#fff"></uni-icons>
				</view>
			</view>
			<!-- 一码通 -->
			<view class="header_equity">
				<view class="title">
					乐游京津冀一码通
				</view>
				<view class="tex">
					查看权益
					<view class="icons">
						<uni-icons type="arrow-right" size="15" color="#feedcb"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="body">
			<!-- 我的订单 -->
			<view class="body_box body_order">
				<view class="body_title" @click="toOderpage">
					<view class="title">
						我的订单
					</view>
					<uni-icons type="right" size="20"></uni-icons>
				</view>
				<view class="oders_box">
					<view class="odersBox" v-for="(v,i) in odersList" @click="toOderspage(v.path)" :key="i">
						<view :class="['iconfont',v.icon]"></view>
						<view class="text">
							{{v.text}}
						</view>
					</view>
				</view>
			</view>
			<!-- 我的券包 -->
			<view class="body_box body_coupon">
				<view class="body_title">
					<view class="title">
						我的券包
					</view>
				</view>

				<view class="coupon_box">
					<view class="couponBox">
						<view class="">
							<text class="numbers">0</text>个
						</view>
						<view class="text">
							建行立减金
						</view>
					</view>
					<view class="couponBox">
						<view class="">
							<text class="numbers">0</text>张
						</view>
						<view class="text">
							平台券
						</view>
					</view>
					<view class="couponBox">
						<image class="images" src="../../static/move.jpg" mode=""></image>
						<view class="text">
							移动权益
						</view>
					</view>
				</view>

			</view>
			<!-- 更多功能 -->
			<view class="body_box body_more">
				<uni-list>
					<template v-for="(v,i) in moreList" :key="i">
						<uni-list-item showArrow :showExtraIcon="true" :extra-icon="{type:v.icon,size:'32'}"
							@click="goPage(v.path)" :title="v.title" clickable  :right-text="maskPhoneNumber(v.number,userStore.userInfo.tel)">
						</uni-list-item>
					</template>

				</uni-list>
			</view>
			<view class="body_box body_btn" v-if="User.getStatus()" @click="loginOut">
				退出登录
			</view>
		</view>

		<view style="height: 200rpx;"></view>
		<tabbarVue></tabbarVue>
	</view>
</template>

<script setup>
	// 底部tabbar
	import tabbarVue from '../../components/tabbar.vue';
	import {
		useUserStore
	} from '@/stores/user';
	import *
	as S
	from "@/utils/storage.js"
	const userStore = useUserStore()
	import {
		useUser
	} from '@/hooks/useUser';
	const User = useUser()
	import {
		ref,
		reactive
	} from 'vue';
	// 手机号
	const user = reactive({
		profile: '/static/user.jpg',
		name: '请登录',
		phone: ''
	})
	// 我的订单
	const odersList = reactive([{
		icon: 'icon-dingdan2',
		text: '景区订单',
		path: '/pagesC/lineOder/lineOder?tid=64'
	}, {
		icon: 'icon-jiudian',
		text: '酒店订单',
		path: '/pagesC/hotelOrders/hotelOrders'
	}, {
		icon: 'icon-xianluxianludingdan',
		text: '线路订单',
		path: '/pagesC/lineOder/lineOder'
	}, {
		icon: 'icon-yanchu',
		text: '演出订单',
		path: '/pagesC/lineOder/lineOder'
	}, {
		icon: 'icon-shangpin1',
		text: '商品订单',
		path: '/pagesC/lineOder/lineOder'
	}, {
		icon: 'icon-shebao1',
		text: '社保订单',
		path: '/pagesC/lineOder/lineOder'
	}])
	const moreList = reactive([{
		icon: 'contact',
		title: '常用联系人',
		number: '',
		reditor: false,
		path: "/pagesD/contacts/contacts"
	}, 
	// {
	// 	icon: 'download-filled',
	// 	title: '收货地址',
	// 	number: '',
	// 	reditor: false,
	// 	path: ""
	// }, 
	{
		icon: 'phone',
		title: '手机',
		number: '188****1111',
		reditor: true,
		path: "/pagesC/mytel"
	}, {
		icon: 'chatboxes',
		title: '客服',
		number: '',
		reditor: false,
		path: "/pagesD/customer/customer"
	}])

	// 去订单中心
	function toOderpage() {
		uni.navigateTo({
			url: '/pagesC/oders/oders'
		})
	}
	// 去订单页面
	function toOderspage(url) {
		if (url) {
			uni.navigateTo({
				url: url
			})
		}
	}
	// 去登录
	function toLogin() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
	// 退出登录
	function loginOut() {
		User.out().then(e => {
			uni.showToast({
				title: "成功",
				complete: () => {
					uni.navigateTo({
						url: "/pagesA/home/home"
					})
				}
			})
		})

	}

	// 去用户编辑
	function userInformation() {
		uni.navigateTo({
			url: '/pagesC/information/information'
		})
	}
	const goPage = (path) => {
		console.log(path, 123)
		if (User.getStatus()) {
			if (path) {
				uni.navigateTo({
					url: path
				})
			}
		} else {
			uni.showToast({
				icon: 'error',
				title: "请先登录"
			})
		}
	}
	
	function maskPhoneNumber(num,phoneNumber) {
		if(num && User.tel()){
			  // 使用正则表达式匹配手机号码
	    return phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3');
		}else{
			return ""
		}
	  
	}
</script>

<style lang="less" scoped>
	.container {
		// box-sizing: border-box;

		.header {
			height: 560rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			padding-bottom: 70rpx;

			box-sizing: border-box;

			.header_user {
				background: #da6e3a;
				position: relative;
				flex: 1;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				padding-top: 60rpx;

				.user_information {
					flex: 1;
					display: flex;
					align-items: center;

					.user {
						width: 154rpx;
						height: 154rpx;
						border-radius: 50%;
						box-sizing: border-box;
						border: 7rpx solid #fff;
						margin-right: 20rpx;
					}

					.content {
						color: #fff;

						.title {
							font-size: 44rpx;
						}

						.phone {
							margin-top: 20rpx;
						}
					}
				}

				.qr_code {
					display: flex;
					align-items: center;

					.code {
						width: 88rpx;
						height: 88rpx;
						margin-right: 30rpx;
					}

				}
			}

			.header_equity {
				width: 90%;
				margin-left: 5%;
				height: 120rpx;
				background: #471010;
				color: #feedcb;
				border-radius: 26rpx;
				position: relative;
				box-sizing: border-box;
				position: absolute;
				bottom: 0rpx;
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-weight: 600;
					font-size: 36rpx;
				}

				.tex {
					display: flex;
					align-items: center;
					display: flex;
					font-size: 26rpx;

					.icons {
						width: 32rpx;
						text-align: center;
						line-height: 32rpx;
						height: 32rpx;
						background: #7a4446;
						margin-left: 10rpx;
						border-radius: 50%;
					}
				}
			}
		}

		.body {
			width: 90%;
			margin-left: 5%;

			.body_box {
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
			}


			// 订单
			.body_order {
				.oders_box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.odersBox {
						width: 20%;
						text-align: center;
						margin-top: 10rpx;

						// .icon
						.iconfont {
							font-size: 60rpx;
							// font-weight: 600;
						}

						.text {
							margin-top: 10rpx;
							font-size: 24rpx;
						}
					}
				}
			}

			// 券包
			.body_coupon {
				.coupon_box {
					width: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.couponBox {
						color: gray;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						margin-top: 20rpx;

						.numbers {
							color: black;
							font-size: 60rpx;
							font-weight: 600;
							margin-right: 4rpx;
						}

						.images {
							width: 94rpx;
							height: 94rpx;
						}

						.text {
							margin: 10rpx 0;
						}
					}
				}

			}

			// 退出登录
			.body_btn {
				background: red;
				color: #fff;
				text-align: center;
				border-radius: 5rpx;
			}


			.body_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 0;

				.title {
					font-weight: 600;
					font-size: 36rpx;
				}
			}
		}
	}
</style>